<script setup>
	import {ref} from 'vue'
const indicatorDots=ref(true)
const autoplay=ref(true)
const interval=ref(2000)
const duration=ref(1000)
const foundSelect=ref([])
const foundRank=ref([])
const foundNewMusic=ref([])
const foundNumber=ref([])
const foundBanner=ref([])
const showLeft=ref()
// console.log(foundNewMusic.value);
const getFoundSelect=()=>{
				uni.request({
					url: 'http://localhost:3008/foundSelect',
					method: 'GET',
					data: {},
					success: res => {
						foundSelect.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
}
const getFoundRank=()=>{
				uni.request({
					url: 'http://localhost:3008/foundRank',
					method: 'GET',
					data: {},
					success: res => {
						foundRank.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
const getFoundNewMusic=()=>{
				uni.request({
					url: 'http://localhost:3008/foundNewMusic',
					method: 'GET',
					data: {},
					success: res => {
						foundNewMusic.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
const getFoundNumber=()=>{
				uni.request({
					url: 'http://localhost:3008/foundNumber',
					method: 'GET',
					data: {},
					success: res => {
						foundNumber.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
const getFoundBanner=()=>{
				uni.request({
					url: 'http://localhost:3008/foundBanner',
					method: 'GET',
					data: {},
					success: res => {
						foundBanner.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
const goToSearch=()=>{
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
const showDrawer=()=>{
	showLeft.value.open()
}
const closeDrawer=()=>{
	showLeft.value.close()
}
getFoundSelect()
getFoundRank()
getFoundNewMusic()
getFoundNumber()
getFoundBanner()
const childrenRef=ref()
const open=()=>{
	childrenRef.value.open('bottom')
}

</script>

<template>
	<view class="container">
		<view class="header-top">
			<img src="../../static/更多.png" @click="showDrawer"/>
			<view class="scroll">
				<ul>
					<li class="active">音乐</li>
					<li>播客</li>
					<li>直播</li>
					<li>听书</li>
					<li>派对</li>

				</ul>
			</view>
			
			<!-- <view class="marquee">
				<view class="marquee-content">
				      这里是跑马灯的文本内容，比如新闻动态或者其他你想展示的信息。
				</view>
			</view> -->
			<img src="../../static/搜索.png" @click="goToSearch"/>
		</view>
		<view class="header-nav">
			<!-- <view class="marquee">
				<view class="marquee-content">
				      这里是跑马灯的文本内容，比如新闻动态或者其他你想展示的信息。
				</view>
			</view> -->
			<view class="scroll">
				<ul>
					<li>音乐</li>
					<li>排行榜</li>
					<li>VIP</li>
					<li>歌单</li>
					<li>SunoAI</li>
					<li>助眠</li>
					<li>欧美</li>
					<li>原创</li>
					<li>学习</li>
					<li>经典</li>
					<li>粤语</li>
					<li>说唱</li>
					<li>国风</li>
					<li>电音</li>
					<li>运动</li>
					<li>民谣</li>
					<li>K-Pop</li>
					<li>摇滚</li>
					<li>R&B</li>
					<li>全球</li>
					<li>儿歌</li>
					<li>HiFi</li>
					<li>爵士</li>
					<li>古典</li>
					<li>ACG</li>
					<li>DJ</li>
				</ul>
			</view>
			<img src="../../static/xiala.png" alt="">
		</view>
		<view class="header-banner">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item in foundBanner">
					<img :src="item.img" alt="" />
				</swiper-item>
			</swiper>
		</view>
		
		<view class="title">
			<span>甄选歌单</span>
		</view>
		
		<view class="content">
			<view class="main-content" v-for="item in foundSelect">
				<img :src="item.img">
				<view>{{item.content}}</view>
			</view>
		</view>
		
		<view class="title-img">
			<span>排行榜</span>
			<img src="" alt="">
		</view>
		
		<view class="content">
			<view class="main-content" v-for="item in foundRank">
				<img :src="item.img">
				<view>{{item.content}}</view>
			</view>
		</view>
		
		<view class="title-img">
			<span>新歌新碟</span>
<!-- 			<img src=""> -->
		</view>
		
		<view class="news-content" v-for="item in foundNewMusic">
			<img :src="item.img" alt="">
			<view class="new">
				<view class="list-name">{{item.title}}</view>
				<view>
					<span>{{item.content}}</span>
					<span>{{item.songSinger}}</span>
				</view>
			</view>
		</view>
		
		<view class="title">
			<span>数字专辑</span>
		</view>
		
		<view class="content">
			<view class="main-content" v-for="item in foundNumber">
				<img :src="item.img">
				<view>{{item.content}}</view>
			</view>
		</view>
		<bottomBar @click="open()"></bottomBar>
		<uni-drawer :width="320" mode="left" ref="showLeft" >
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<drawer></drawer>
				</scroll-view>
			</view>
		</uni-drawer>
		<uni-popup ref="childrenRef" background-color="#1b1b23"  type="bottom">
			<popup></popup>
		</uni-popup>
	</view>
	
</template>

<style scoped>
	
.container{
	margin: 0 auto;
	background-color: #1b1b23;
}
 .active{
	 color: #fff;
	 border-bottom: 2px solid red;
	 font-size: 22px;
 }
.title{
	font-size: 20px;
	margin-top: 20px;
	color:#fff;
	margin-left: 10px;
}
.title-img{
	font-size: 20px;
	margin-top: 30px;
	color:#fff;
	margin-left: 10px;
	margin-bottom: 10px;
}

.header-top{
	display: flex;
}
.header-top img{
	width: 30px;
	height: 30px;
	margin:auto 5px;
}
.scroll{
	white-space: nowrap;
	overflow:scroll;
	width: 80%;
}
.scroll ul{
	white-space: nowrap;
	overflow: scroll;
	display: flex;
	justify-content: space-around;
	list-style: none;
	padding-left: 0px;
}
.scroll li{
	width: 60px;
	color:#919191;
	font-size: 20px;
	margin: auto 10px;
	padding-bottom:3px ;
	text-align: center;
}
.marquee {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
	color: #fff;
	line-height: 30px;
  }
 
.marquee-content{
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}
.marquee-content-clone {
    position: absolute;
    left: 0;
    top: 0;
}
 @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
.header-nav{
	  display: flex;
	  margin-top: 20px;
}
.header-nav li{
	text-align: center;
	/* width: 40px; */
	font-size: 16px;
	margin: auto 20px;
}
.header-nav img{
	  width: 30px;
	  height: 30px;
	  margin: auto 0;
	  margin-left: 20px;
}
.header-banner{
	margin-top: 20px;
	width: 98%;
	height: 40%;
	/* display: flex; */
}
.header-banner img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	margin: auto 2px;
}
/* .swiper-item{
	display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
} */


.content{
	margin-top:10px ;
	white-space: nowrap;
	overflow: scroll;
	display: flex;
	color:white;
	
}
.content .main-content{
	padding:0 5px 10px 10px;
	width: 140px;
	white-space: pre-wrap;	
}
.content img{
	width: 130px;
	height: 140px;
	border-radius: 10px;
}

/* .rank{
	margin-top: 30px;
	margin-left: 5px;
	color:#fff;
	font-size: 24px;
}

.news{
	 color: #fff;
	 	margin-top: 30px;
} */

 .news-content{
	 display: flex;
	 flex-direction: row;
	 justify-content: flex-start;
	 width: 100%;
	 height:60px;
	 margin-top: 5px;
	 color: #fff;
 }
 .news-content img{
	 margin:0 0 0 15px;
	 width: 50px;
	 height: 50px;
	 border-radius: 5px;
 }
.news-content .new{
	 margin-left: 10px;
	 margin-top: 5px;
 }
.uni-drawer__content{
 	background-color: #151515;
 	
 }
 .uni-drawer__content{
 	background-color: #151515;
 	
 }
 .uni-drawer__content--visible img{
 	width: 30px;
 	height: 30px;
 }
</style>
